<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/stuWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>英语版块</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/englishList' }">英语角</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    标题-->
    <div class="light">
      <h3>妈妈给过你的最好忠告</h3>
    </div>
    <div class="content">
      <p>Never lose hope. And be thankful for what you have.</p>
      <p>永远不要失去希望，对你所拥有的一切心存感激。</p>
      <p>"Living to make yourself happy is the best thing you can do for people around you."</p>
      <p>“活得快乐，这是你能为身边的人做的最好的一件事。”</p>
      <p>Never take an advice from someone you would not want to switch places with.</p>
      <p>如果一个人现在的处境是你不想要的，那就不要采纳TA的建议。</p>
      <p>Treat people like humans and not vending machines.</p>
      <p>不要把人当成是自动贩卖机，把他们当人看。</p>
      <p>"Bachenge toh aur bhi ladenge". (Fight till your last breath.)</p>
      <p>战斗到最后。</p>
      <p>Go to sleep and things will be better in the morning.</p>
      <p>睡一觉，明天一早事情都会变得更好。</p>
      <p>Right before I walked down the aisle to marry her son, my mother-in-law told me, "Michelle, if a man can't make himself a sandwich, he should starve."</p>
      <p>在我的婚礼现场，就在我马上要走过去与我的先生立誓的时候，我的婆婆告诉我：“米歇尔，如果一个男人连个三明治都懒得给自己做，那就让他饿着吧。”</p>
      <p>"Life isn't easy, It wasn't suppose to be! Don't expect it to be easy"</p>
      <p>“生活并不简单，它不会朝着你所期待的去发展，不要期望它会变得简单。”</p>
    </div>
    <div class="light">
      <el-button type="primary" style="margin-top: 20px;" @click="complete">完成阅读</el-button>
    </div>
  </el-card>
</template>

<script>
  export default {
    methods:{
      complete(){
        this.$message({
          message:'恭喜您已完成本篇阅读！',
          type:"success"
        });
        // 跳转至EnglishList页面
        this.$router.replace("/englishList");
      }
    }
  }
</script>
<style scoped>
  .light{
    font-size: 30px;
    text-align: center;
    color: #fefefe;
    text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c;
    -webkit-animation: shine 2.4s infinite;/*设置动画*/
  }
  @-webkit-keyframes shine{/*创建动画*/
    0%,100%{ color:#fff;text-shadow:0 0 10px #f0d1f8,0 0 10px #0000FF; }
    50%{ text-shadow:0 0 10px #0000FF,0 0 40px #0ae642; }
  }
  .content{
    min-height:350px;
    overflow-y:auto;
    max-height:600px;
  }
  p{
    font-size: 18px;
    color: #fefefe;
    text-shadow:0px 1px 0px #d27878,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, .9);
  }
</style>
